<script>
export default {
  name: "CardExamplePage",
  data() {
    return{
      tableData: [
        {
          name: '张飞1',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞2',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞3',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞4',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
        {
          name: '张飞20',
          age: 22,
          sex: '男',
          date: '2024-5-8',
          address: '江苏省南京市'
        },
      ],
      currentPageData:[]
    }
  },
  methods: {
    handelCurrentChange(current) {
      this.refreshCurrentPageData(current)
    },
    handelSizeChange(size) {

    },
    refreshCurrentPageData(current) {
      this.currentPageData = []
      for (let i = (current - 1) * 10; i < (current) * 10; i ++) {
        this.currentPageData.push(this.tableData[i])
      }
    }
  },
  created() {
    this.refreshCurrentPageData(1)
  }
}

</script>

<template>
<div style="padding: 20px">
  <el-card>
    <div slot="header">
      <span>我是卡片标题</span>
    </div>
    <div>
      <el-table :data = "currentPageData" stripe border>
        <el-table-column label="姓名" width="200">
          <template v-slot="scope">
            <el-tag>{{scope.row.name }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="年龄" prop="age" width="200"></el-table-column>
        <el-table-column label="性别" prop="sex" width="200"></el-table-column>
        <el-table-column label="日期" prop="date" width="200"></el-table-column>
        <el-table-column label="地址" prop="address" width="200"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" size="mini" plain icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" size="mini" plain icon="el-icon-delete-solid">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="tableData.length"
                     background
                     style="margin-top: 15px"
                     @current-change="handelCurrentChange"
                     @size-change="handelSizeChange"
                     layout="sizes,prev,pager,next,jumper,total"/>
    </div>
  </el-card>

</div>
</template>

<style scoped>

</style>